<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// AJAX -> Async JavaScript And XML 阿贾克斯
// 异步js数据交互
// AJAX是一种无需重新加载整个网页，实现网页部分内容更新的技术（局部刷新）

// 1.创建数据交互对象
// let xhr = new XMLHttpRequest()
// 2.初始化请求
// xhr.open(请求方式，请求地址，同步/异步)
// 3.设置请求头（post请求）
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 4.发送请求
// xhr.send(null/查询字符串)
// 5.等待 请求和响应 状态改变
// xhr.readState 请求状态
// xhr.readState == 0 请求未初始化，open未调用
// xhr.readState == 1 请求已初始化，open已调用（与服务器建立连接）
// xhr.readState == 2 请求已发送，send已调用（服务器接收到请求）
// xhr.readState == 3 请求处理中，前端处于loading状态
// xhr.readState == 4 请求已完成，前端处于done状态

// xhr.status http响应状态码
// xhr.status == 200 响应成功
// xhr.status == 301 请求重定向（资源永久转移）
// xhr.status == 302 请求重定向（资源临时转移）
// xhr.status == 304 资源未被修改，使用缓存资源
// xhr.status == 403 资源不可用，权限问题
// xhr.status == 404 找不到资源，服务器无法处理
// xhr.status == 500 服务器内部错误

// xhr.onreadstatechange = function (){
//     // 当 xhr.readState 发送变化时，触发readstatechange事件
//     if (xhr.readState === 4) {// 请求完成
//         if (xhr.status >= 200 && xhr.status < 300) {// 响应成功
//             console.log( xhr.responseText )// 接收 字符串、json 数据
//             console.log( xhr.responseXML )// 接收 xml 数据
//         } else {
//             console.log( '请求失败', xhr.status )
//         }
//     }
// }

// 请求超时和取消请求不会触发load事件
// xhr.onload = function (){
//     console.log( xhr.readState )// 4
//     console.log( xhr.responseText )// 接收 字符串、json 数据
//     console.log( xhr.responseXML )// 接收 xml 数据
// }

// xhr.timeout = 毫秒 默认为0
// xhr.abort() 取消请求

// 使用原生js的ajax发送请求，步骤太繁琐
// 封装ajax（自己封装的ajax请求函数，axios等）
// fetch 是下一个代ajax（是一种新技术）

</script>
</body>
</html>